Understanding Ajax Callbacks
Description
An Ajax callback is actually extremely simple. In fact, it is so simple that some people are confused because they somehow expect that there is more to it than there actually is.
Discussion
Ajax is basically a lightweight way for a browser to exchange a little data with the server without having to refresh the whole page.
The chain of events in an Ajax callback is as follows:
Some JavaScript code in the browser executes, typically in an event handler. It could be in response to a button click, or to the user tabbing out of a field: the cause of the event does not matter. The essential point is that some JavaScript code is executed.
The JavaScript code that executes in the browser makes an Ajax callback. Ajax callbacks always start in JavaScript.
The actual mechanism for making an Ajax callback is not really important. There are many JavaScript functions and libraries that can make an Ajax callback; some rely on browser-specific features, and some go to great lengths to insulate the caller from the vagaries of different browsers.
In Alpha Anywhere, we have simplified this process by creating a JavaScript function called a5.ajax.callback(). However if you do a Google search for "ajax callback", you will find many other techniques. You don't need to worry about the other techniques: for the purpose of just getting things done in Alpha Anywhere, use the built-in a5.ajax.callback() function.
The Ajax callback itself works like this:
The browser sends a message (i.e. data) to the server, and specifies the page (usually the .A5W page in Alpha Anywhere) on the server that will receive the message.
The browser does not wait until a response is received from the server; the user is not prevented from doing something else during the Ajax callback. In other words, the message that is sent to the server is asynchronous — hence the 'A' in Ajax.
On the server side, the message from the browser is received and the page that was specified in the Ajax callback runs. In Alpha Anywhere, this page is just Xbasic code.
It can execute any Xbasic that you want. It can set session variables. It can update records in a database. It can do anything that you would normally do in Xbasic. The important thing to understand about this page is that the data in the message that was sent by the Ajax request is available to it.
This is similar to a page called with parameters. For example, if you had an .A5W page called page1.a5w, and used the url page1.a5w?data1=alpha&data2=beta, then your .A5W page would see two variables, data1 and data2. An Ajax callback that passes data in the callback is doing essentially the same thing, albeit with a different mechanism.
The .A5W page can also send a message back to the browser. This message can be in the form of some XML data (which was originally the 'X' in Ajax), or much more commonly now in the form of some JavaScript code for the browser to evaluate.
In the case of the built-in a5.ajax.callback() function, the message that is sent back to the browser is always some JavaScript code.
When the browser receives the response from the server, which is, as described above, nothing more than a string of JavaScript code, it executes that code.
So in summary an Ajax callback looks like this:
Send a message to the server from JavaScript running in the browser
Send a message (i.e. JavaScript code) from the server back to the browser
Execute the JavaScript code that was sent from the server in the browser
See Also